<template>
  <div>

    <x-header style="background-color:#10aeff;">设备管理</x-header>
    <search v-model="searchKey" position="absolute" auto-scroll-to-top top="46px" @on-submit="onSearch" ref="search" @on-focus="foucs" @on-cancel="cancel"></search>
    <load-more :tip="title" :show-loading="false" background-color="#fbf9fe" :class="{ active: isActive}"></load-more>

    <group>
      <div v-for="(item,index) in newdata" :key="index">

        <cell :title="index +':'+ item.kind_name +'--'+ item.user_name " is-link :border-intent="false" :arrow-direction="item.show ? 'up':'down'" @click.native="show(index)"></cell>

        <template v-if="item.show">
          <div class="vux-form-preview weui-form-preview">
            <div class="weui-form-preview__bd">
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">分类</label>
                <span class="weui-form-preview__value">{{item.kind_name}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">型号</label>
                <span class="weui-form-preview__value">{{item.model}}</span>
              </div>

              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">编号</label>
                <span class="weui-form-preview__value">{{item.barcode}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">品牌</label>
                <span class="weui-form-preview__value">{{item.brand}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">出厂编号</label>
                <span class="weui-form-preview__value">{{item.serial_number}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">部门</label>
                <span class="weui-form-preview__value">{{item.department}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">使用人</label>
                <span class="weui-form-preview__value">{{item.user_name}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">工号</label>
                <span class="weui-form-preview__value">{{item.user_code}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">设备状态</label>
                <span class="weui-form-preview__value">{{item.state}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">使用类型</label>
                <span class="weui-form-preview__value">{{item.type}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">入厂时间</label>
                <span class="weui-form-preview__value">{{item.factory_time | dateFormat}}</span>
              </div>
              <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">备注</label>
                <span class="weui-form-preview__value">{{item.remarks}}</span>
              </div>

            </div>
            <div class="weui-form-preview__ft">
              <div></div>
              <a href="javascript:" class="weui-form-preview__btn weui-form-preview__btn_default" style="color:#10aeff" @click="update(index)" v-if=" buttonshow ">修改</a>
              <a href="javascript:" class="weui-form-preview__btn weui-form-preview__btn_primary" style="color:#9C85CD" @click="device(index)">配置</a>
              <a href="javascript:" class="weui-form-preview__btn weui-form-preview__btn_primary" style="color:#ff9900" @click="info(index)">保修</a>
              <!-- <a href=" javascript: " class="weui-form-preview__btn weui-form-preview__btn_primary " style="color:#09BB07 " v-if=" buttonshow " @click="maintenance(index)">报修</a> -->
              <!-- <a href="javascript: " class="weui-form-preview__btn weui-form-preview__btn_primary " style="color:#E64340 " v-if=" buttonshow ">报废</a> -->
            </div>
          </div>
        </template>
      </div>
    </group>
    <br><br>
    <!-- 修改窗体 -->
    <div v-transfer-dom>
      <confirm v-model="updateshow " title="设备修改 " @on-confirm="onConfirmUpdate ">
        <group>
          <x-input align="left " title="使用人 " v-model="obj.user_name "></x-input>
          <x-input align="left " title="工号 " v-model="obj.user_code "></x-input>
          <selector align="left " title="设备状态 " :options="[ '使用', '闲置'] " v-model="obj.state "></selector>
          <selector align="left " title="使用类型 " :options="[ '生产', '管理', '技术'] " v-model="obj.type "></selector>
          <x-textarea title="备注 " v-model="obj.remarks "></x-textarea>
        </group>
      </confirm>
    </div>
    <!-- /修改窗体 -->

    <!-- 配置窗体 -->
    <div v-transfer-dom>
      <popup v-model="deviceshow " position="bottom " style="width:100%">
        <group v-if="obj.device_peizhi ">
          <x-table :cell-bordered="true " :content-bordered="true " style="background-color:#fff;padding:0 10px ">
            <div>
              <thead>
                <tr style="background-color: #F7F7F7 ">
                  <th>部件</th>
                  <th>信息</th>
                  <th>数量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in obj.device_peizhi " :key="item.id ">
                  <td style="width:80px ">{{ item.Name}}</td>
                  <td>{{ item.Notes }}</td>
                  <td style="width:50px ">{{ item.Number}}</td>
                </tr>
              </tbody>
            </div>
          </x-table>
        </group>
        <load-more v-if="!obj.device_peizhi " tip="没有相关信息 " :show-loading="false " background-color="#fbf9fe "></load-more>
        <div style="padding: 15px; ">
          <x-button @click.native="deviceshow=false " plain type="primary "> 关闭</x-button>
        </div>
      </popup>
    </div>
    <!-- 配置窗体 -->

    <!-- 保修窗体 -->
    <div v-transfer-dom>
      <popup v-model="infoshow " position="bottom " style="width:100%">

        <div v-if="infobool()">
          <group label-width="5em" :title="item.StartDate + ' 至 ' + item.EndDate" v-for="item in obj.device_baoxiu" :key="item.id">
            <cell :value="item.Remark" style="text-algin:left"></cell>
            </cell>
          </group>

        </div>
        <load-more v-if="!(infobool()) " tip="没有相关信息 " :show-loading="false " background-color="#fbf9fe "></load-more>
        <div style="padding: 15px; ">
          <x-button @click.native="infoshow=false " plain type="primary "> 关闭</x-button>
        </div>
      </popup>
    </div>
    <!-- 保修窗体 -->

    <!-- 报修窗体 -->
    <div v-transfer-dom>
      <confirm v-model="maintenanceshow " title="设备报修 " @on-confirm="onConfirmMaintenance ">
        <group>
          <x-input align="left" title="设备编号" v-model="obj.barcode "></x-input>
          <x-input align="left" title="联系人" v-model="obj.contacts "></x-input>
          <x-input align="left" title="联系电话" v-model="obj.contact_number "></x-input>
          <selector align="left" title="使用类型" :options="[ '生产', '管理', '技术'] " v-model="obj.type "></selector>
          <x-textarea title="故障描述" v-model="obj.reason "></x-textarea>
        </group>
      </confirm>
    </div>
    <!-- /报修窗体 -->

    <toast v-model="handleSuccess " :time="1000 ">操作成功</toast>
    <div>
      <div v-transfer-dom>
        <loading :show="loadingshow " text="加载中 "></loading>
      </div>
    </div>
  </div>
</template>

<script>
import {
  TransferDom,
  FormPreview,
  LoadMore,
  XHeader,
  Cell,
  CellBox,
  CellFormPreview,
  Group,
  Search,
  XInput,
  Confirm,
  Selector,
  XTextarea,
  Toast,
  dateFormat,
  XButton,
  Popup,
  XTable,
  Loading
} from "vux";
import Icon from "vue-awesome/components/Icon";
import "vue-awesome/icons/folder-open";
import axios from "axios";

export default {
  directives: {
    TransferDom
  },
  components: {
    FormPreview,
    LoadMore,
    XHeader,
    Icon,
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Search,
    XInput,
    Confirm,
    Selector,
    XTextarea,
    Toast,
    XButton,
    Popup,
    XTable,
    Loading
  },
  data() {
    return {
      data: [],
      newdata: [],
      searchKey: "",
      title: "",
      isActive: false,
      lastShow: {
        index: 0,
        data: {}
      },
      maintenanceshow: false,
      loadingshow: false,
      infoshow: false,
      updateshow: false,
      deviceshow: false,
      obj: {},
      handleSuccess: false,
      buttonshow:
        this.$store.state.info.role[0].role_name == "部门领导" ||
        this.$store.state.info.role[0].role_name == "主管领导"
          ? false
          : true
    };
  },
  filters: {
    //过滤器，美化time
    dateFormat
  },
  created() {
    this.onSearch();
  },

  methods: {
    infobool() {
      if (typeof this.obj.device_baoxiu == "object") {
        if (this.obj.device_baoxiu.length > 0) {
          return true;
        }
      }
      return false;
    },
    foucs() {
      this.isActive = true;
    },
    cancel() {
      this.isActive = false;
    },

    gettitle() {
      if (this.newdata.length == 0) {
        this.title = "暂无数据，请重新搜索";
      } else {
        this.title = "信息列表";
      }
    },
    async onSearch() {
      let department = this.$store.state.info.user.department;
      let company = this.$store.state.info.user.company;
      if (this.$store.state.info.role[0].role_name == "系统管理员") {
        department = "";
      }
      if (this.$store.state.info.role[0].role_name == "主管领导") {
        department = "";
      }

      let instance = axios.create({
        headers: { "content-type": "application/json" }
      });
      try {
        let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
          query: `{
                    deviceListSearch(key:"${
                      this.searchKey
                    }",department:"${department}",company:"${company}"){
                      id,
                      kind_code,
                      kind_name,
                      department,
                      company,
                      user_name,
                      user_code,
                      factory_time,
                      state,
                      serial_number,
                      brand,
                      model,
                      type,
                      barcode,
                      remarks,
                      device_peizhi,
                      device_baoxiu
                     }
                  }`
        });
        this.data = info.data.data.deviceListSearch;
        this.getnewdata();
      } catch (error) {
        console.error(error);
      }
    },

    getnewdata() {
      this.newdata = [];
      for (var item of this.data) {
        item.show = false;
        this.newdata.push(item);
      }
      this.gettitle();
    },
    show(index) {
      let newdata1 = null;
      if (this.lastShow.data) {
        if (this.lastShow.data.show && index != this.lastShow.index) {
          this.lastShow.data.show = false;
          this.$set(this.newdata, this.lastShow.index, this.lastShow.data);
        }
      }
      newdata1 = {
        id: this.newdata[index].id,
        brand: this.newdata[index].brand,
        company: this.newdata[index].company,
        department: this.newdata[index].department,
        drive: this.newdata[index].drive,
        kind_code: this.newdata[index].kind_code,
        kind_name: this.newdata[index].kind_name,
        model: this.newdata[index].model,
        show: !this.newdata[index].show,
        user_code: this.newdata[index].user_code,
        user_name: this.newdata[index].user_name,
        type: this.newdata[index].type,
        state: this.newdata[index].state,
        serial_number: this.newdata[index].serial_number,
        factory_time: this.newdata[index].factory_time,
        barcode: this.newdata[index].barcode,
        remarks: this.newdata[index].remarks,
        device_peizhi: this.newdata[index].device_peizhi,
        device_baoxiu: this.newdata[index].device_baoxiu
      };
      this.$set(this.newdata, index, newdata1);
      this.lastShow.index = index;
      this.lastShow.data = newdata1;
    },
    update(index) {
      this.updateshow = true;
      this.obj = {
        id: this.newdata[index].id,
        brand: this.newdata[index].brand,
        company: this.newdata[index].company,
        department: this.newdata[index].department,
        drive: this.newdata[index].drive,
        kind_code: this.newdata[index].kind_code,
        kind_name: this.newdata[index].kind_name,
        model: this.newdata[index].model,
        show: !this.newdata[index].show,
        user_code: this.newdata[index].user_code,
        user_name: this.newdata[index].user_name,
        type: this.newdata[index].type,
        state: this.newdata[index].state,
        serial_number: this.newdata[index].serial_number,
        factory_time: this.newdata[index].factory_time,
        barcode: this.newdata[index].barcode,
        remarks: this.newdata[index].remarks
      };
      if (this.obj.user_code == "null" || this.obj.user_code == "NULL") {
        this.obj.user_code = "";
      }
    },
    async onConfirmUpdate() {
      let instance = axios.create({
        headers: { "content-type": "application/json" }
      });
      try {
        let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
          query: `mutation{ deviceUpdate(id:${this.obj.id},department:"${
            this.obj.department
          }",
          user_code:"${this.obj.user_code}",type:"${this.obj.type}",state:"${
            this.obj.state
          }",
          remarks:"${this.obj.remarks}",company:"${
            this.obj.company
          }",user_name:"${this.obj.user_name}")}`
        });
        if (info.data.data.deviceUpdate) {
          for (let item in this.obj) {
            this.obj[item] = null;
          }
          this.handleSuccess = true;
          this.onSearch();
        }
      } catch (error) {
        console.error(error);
      }
    },
    async device(index) {
      this.loadingshow = true;
      this.obj = {
        id: this.newdata[index].id,
        kind_code: this.newdata[index].kind_code,
        brand: this.newdata[index].brand,
        serial_number: this.newdata[index].serial_number,
        device_peizhi: this.newdata[index].device_peizhi
      };

      if (this.obj.device_peizhi) {
        let peizhi = this.obj.device_peizhi.replace(/'/g, '"');

        this.obj.device_peizhi = JSON.parse(peizhi);
      }
      if (
        !this.obj.device_peizhi &&
        this.obj.kind_code == "C" &&
        this.obj.brand == "Lenovo"
      ) {
        let instance = axios.create({
          headers: { "content-type": "application/json" }
        });
        try {
          let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
            query: `{info (QueryType:"peizhi",ProductSn:"${
              this.obj.serial_number
            }")}`
          });
          if (JSON.parse(info.data.data.info).result.length) {
            this.obj.device_peizhi = JSON.parse(info.data.data.info).result;
          }

          if (this.obj.device_peizhi) {
            let peizhi1 = JSON.stringify(this.obj.device_peizhi);
            peizhi1 = peizhi1.replace(/\"/g, "'");
            await instance.post(`http://192.168.10.19:4000/graphql`, {
              query: `mutation{deviceUpdatePeizhi(id:${
                this.obj.id
              },device_peizhi:"${peizhi1}")}`
            });
          }
        } catch (error) {
          console.error(error);
        }
      }
      this.loadingshow = false;
      this.deviceshow = true;
    },
    async info(index) {
      this.loadingshow = true;
      this.obj = {
        id: this.newdata[index].id,
        kind_code: this.newdata[index].kind_code,
        brand: this.newdata[index].brand,
        serial_number: this.newdata[index].serial_number,
        device_baoxiu: []
      };

      if (this.newdata[index].device_baoxiu) {
        let baoxiu = this.newdata[index].device_baoxiu.replace(/'/g, '"');
        this.obj.device_baoxiu = JSON.parse(baoxiu);
      }
      if (
        this.obj.device_baoxiu.length == 0 &&
        this.obj.kind_code == "C" &&
        this.obj.brand == "Lenovo"
      ) {
        let instance = axios.create({
          headers: { "content-type": "application/json" }
        });
        try {
          let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
            query: `{info (QueryType:"baoxiu",ProductSn:"${
              this.obj.serial_number
            }")}`
          });
          if (JSON.parse(info.data.data.info).ServiceProductList.length) {
            this.obj.device_baoxiu = JSON.parse(
              info.data.data.info
            ).ServiceProductList;
          }

          if (this.obj.device_baoxiu) {
            let baoxiu1 = JSON.stringify(this.obj.device_baoxiu);
            baoxiu1 = baoxiu1.replace(/\"/g, "'");
            await instance.post(`http://192.168.10.19:4000/graphql`, {
              query: `mutation{deviceUpdateBaoxiu(id:${
                this.obj.id
              },device_baoxiu:"${baoxiu1}")}`
            });
          }
        } catch (error) {
          console.error(error);
        }
      }
      this.loadingshow = false;
      this.infoshow = true;
    },
    maintenance(index) {
      this.obj = {
        id: this.newdata[index].id,
        type: this.newdata[index].type,
        barcode: this.newdata[index].barcode,
        serial_number: this.newdata[index].serial_number,
        department: this.newdata[index].department,
        company: this.newdata[index].company,
        contacts: this.$store.state.info.user.user_name,
        contact_number: "",
        reason: "",
        state: "报修",
        applicant_name: this.$store.state.info.user.user_name,
        applicant_code: this.$store.state.info.user.user_code
      };
      this.maintenanceshow = true;
    },
    async onConfirmMaintenance() {}
  }
};
</script>

<style scoped>
.active {
  padding-top: 40pt;
}
.weui-form-preview__bd {
  padding: 10px 15px;
  font-size: 0.9em;
  text-align: right;
  color: #999999;
  line-height: 2;
  background-color: #eee;
}
.weui-form-preview__item {
  overflow: hidden;
}
.weui-form-preview__label {
  float: left;
  margin-right: 1em;
  min-width: 4em;
  color: #999999;
  text-align: justify;
  text-align-last: justify;
}
.weui-form-preview__value {
  display: block;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;
}
.weui-cell:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  left: 15px;
}
.weui-cell:first-child:before {
  display: table-header-group !important;
}
.weui-form-preview__ft {
  position: relative;
  line-height: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.weui-form-preview__btn {
  position: relative;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  color: #3cc51f;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.weui-form-preview__btn:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #d5d5d6;
  color: #d5d5d6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
.weui-form-preview__btn:active {
  background-color: #eeeeee;
}
</style>



